<template>
  <div class="user-selector">
    <el-dialog
      v-model="dialogVisible"
      title="选择人员"
      width="800px"
      @close="handleClose"
    >
      <el-row :gutter="10">
        <!-- 左侧：部门与角色筛选 -->
        <el-col :span="8">
          <el-tabs v-model="leftActiveTab" @tab-change="handleLeftTabChange">
            <el-tab-pane label="部门" name="department">
              <div class="filter-panel">
                <el-input
                  v-model="deptFilterText"
                  placeholder="搜索部门"
                  clearable
                  class="search-input"
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
                <div class="tree-container">
                  <el-tree
                    ref="deptTreeRef"
                    :data="internalDepartmentTree"
                    :node-key="rowKey"
                    :props="deptProps"
                    :filter-node-method="filterDepartmentNode"
                    :expand-on-click-node="false"
                    @node-click="handleDeptNodeClick"
                  />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="角色" name="role">
              <div class="filter-panel">
                <el-input
                  v-model="roleFilterText"
                  placeholder="搜索角色"
                  clearable
                  class="search-input"
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
                <div class="tree-container">
                  <el-tree
                    ref="roleTreeRef"
                    :data="internalRoleTree"
                    :node-key="rowKey"
                    :props="roleProps"
                    :filter-node-method="filterRoleNode"
                    :expand-on-click-node="false"
                    @node-click="handleRoleNodeClick"
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        
        <!-- 右侧：用户列表与已选择用户 -->
        <el-col :span="16">
          <el-tabs v-model="rightActiveTab"  @tab-change="handleRightTabChange">
            <el-tab-pane label="用户列表" name="userList">
              <el-card class="user-list-card">             
                <div class="user-list-panel">
                  <div class="user-list-header">
                    <el-input
                      v-model="userFilterText"
                      placeholder="搜索用户"
                      clearable
                      class="search-input"
                      style="width: 200px"
                    >
                      <template #prefix>
                        <el-icon><Search /></el-icon>
                      </template>
                    </el-input>
                    <el-tag
                      v-if="currentFilterLabel"
                      class="filter-tag"
                    >
                      {{ currentFilterLabel }}
                    </el-tag>
                  </div>
                  <div class="table-container">
                    <el-table
                      ref="userTableRef"
                      :data="filteredUsers"
                      height="300"
                      :row-key="rowKey"
                      @selection-change="handleSelectionChange"
                      @row-click="handleRowClick"
                    >                      
                      <el-table-column v-if="selectedLimit === 1" type="radio" width="50">
                        <template #default="{ row }">
                            <el-radio
                              v-model="currentRowRadio"
                              :value="row['id']"
                            />
                        </template>
                      </el-table-column>
                      <el-table-column v-else type="selection" width="50" />
                      <el-table-column prop="name" label="姓名" width="120" />
                      <el-table-column prop="position" label="职位" />
                      <el-table-column prop="departmentName" label="部门" />
                    </el-table>
                  </div>
                  <div class="pagination-container">
                    <el-pagination
                      size="small"
                      layout="prev, pager, next"
                      :total="totalUsers"
                      :page-size="pageSize"
                      v-model:current-page="currentPage"
                      @current-change="handlePageChange"
                    />
                  </div>
                </div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane :label="`已选择(${selectedUsersMap.size})`" name="selectedUsers">
              <el-card class="user-list-card">
                <div class="selected-users-panel">
                  <div class="selected-users-header">
                    <el-button 
                      type="danger" 
                      size="small" 
                      @click="clearAllSelected"
                      :disabled="selectedUsersMap.size === 0"
                    >
                      清空所有
                    </el-button>
                  </div>
                  <div class="selected-users-container">
                    <el-card 
                      v-for="user in Array.from(selectedUsersMap.values())" 
                      :key="user[rowKey]" 
                      class="selected-user-card"
                      shadow="hover"
                    >
                      <div class="user-card-content">
                        <div class="user-info">
                          <div class="user-name">{{ user.name }}</div>                        
                          <div class="user-details">
                            <div class="user-department">部门：{{ user.departmentName }}</div>
                            <div class="user-position">角色：{{ user.position }}</div>
                          </div>
                        </div>
                        <el-button 
                          type="danger" 
                          :icon="Delete" 
                          circle 
                          size="small" 
                          @click="removeSelectedUser(user[rowKey])"
                        />
                      </div>
                    </el-card>
                    <div v-if="selectedUsersMap.size === 0" class="no-selected-users">
                      暂无已选择的用户
                    </div>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Delete } from '@element-plus/icons-vue'
import { debounce } from '@/utils/utils'

const emit = defineEmits(['confirm', 'cancel'])
// 定义 props
const props = defineProps({
  selected:{
    type: Array,
    default: () => []
  },
  // 部门树数据
  deptTreeData: {
    type: Array,
    default: () => []
  },
  // 角色树数据
  roleTreeData: {
    type: Array,
    default: () => []
  },
  // 部门数据API地址
  deptDataApi: {
    type: String,
    default: ''
  },
  // 角色数据API地址
  roleDataApi: {
    type: String,
    default: ''
  },
  userListData: {
    type: Array,
    default: () => []
  },
  // 角色数据API地址
  userDataApi: {
    type: String,
    default: ''
  },
  dataKey:{
    type: String,
    default: 'id'
  },
  onConfirm: Function,
  onCancel: Function,
  limit: {
    type: Number,
    default: 0 // 0表示无限制，其他值表示最多可选数量
  }, 
  visible: {
    type: Boolean,
    default: false
  }
})

// 组件引用
const deptTreeRef = ref()
const roleTreeRef = ref()
const userTableRef = ref()

const rowKey = ref(props.dataKey)

// 数据状态
const dialogVisible = ref(props.visible)
const leftActiveTab = ref('department')
const rightActiveTab = ref('userList')
const deptFilterText = ref('')
const roleFilterText = ref('')
const userFilterText = ref('')
const internalDepartmentTree = ref(props.deptTreeData) // 内部部门树数据
const internalRoleTree = ref(props.roleTreeData) // 内部角色树数据
const internalUserList = ref([]) // 内部用户列表数据
const allUsers = ref([])
const currentCallback = ref(null)
const selectedUserIds = ref([])
const currentRow = ref(null)  //  当前行
const currentFilterId = ref(null)
const currentFilterType = ref('department') // department or role
const currentFilterLabel = ref('')
const totalUsers = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)

// 使用 Map 来存储已选择的用户，便于查找和删除
const selectedUsersMap = ref(new Map())
//const selectedUsers = ref([])
const selectedLimit = ref(props.limit) // 0表示没有限制
// 部门树配置
const deptProps = {
  children: 'children',
  label: 'name'
}

// 角色树配置
const roleProps = {
  children: 'children',
  label: 'name'
}

// 过滤部门节点
const filterDepartmentNode = (value, data) => {
  if (!value) return true
  return data.name.includes(value)
}

// 过滤角色节点
const filterRoleNode = (value, data) => {
  if (!value) return true
  return data.name.includes(value)
}

// 监听部门搜索
watch(deptFilterText, (val) => {
  deptTreeRef.value.filter(val)
})

// 监听角色搜索
watch(roleFilterText, (val) => {
  roleTreeRef.value.filter(val)
})

// 计算过滤后的用户列表
const filteredUsers = computed(() => {
  if (!userFilterText.value) {
    return allUsers.value
  }
  return allUsers.value.filter(user => 
    user.name.includes(userFilterText.value) || 
    user.departmentName.includes(userFilterText.value)
  )
})

// 通过 URL 获取部门数据
const loadDepartmentData = async () => {
  // 如果有传入的 departmentTree 数据，优先使用
  if (props.deptTreeData.length > 0) {
    
    internalDepartmentTree.value = props.deptTreeData
  }
  
  // 如果有 deptDataApi，则通过 URL 获取数据
  if (props.deptDataApi) {
    try {
      const response = await fetch(props.deptDataApi)
      const data = await response.json()
      internalDepartmentTree.value = data || []
    } catch (error) {
      console.error('获取部门数据失败:', error)
      // 获取失败时使用默认数据
      loadDefaultDepartmentData()
    }
  }
}

// 通过 URL 获取角色数据
const loadRoleData = async () => {
  // 如果有传入的 roleTree 数据，优先使用
  if (props.roleTreeData.length > 0) {
    internalRoleTree.value = props.roleTreeData
  }
  
  // 如果有 roleDataApi，则通过 URL 获取数据
  if (props.roleDataApi) {
    try {
      const response = await fetch(props.roleDataApi)
      const data = await response.json()
      internalRoleTree.value = data || []
    } catch (error) {
      console.error('获取角色数据失败:', error)
      // 获取失败时使用默认数据
      loadDefaultRoleData()
    }
  }
}

// 通过 URL 获取用户数据
const loadUserData = async () => {
  // 如果有传入的 userListData 数据，优先使用
  if (props.userListData.length > 0) {
    return props.userListData
  }
  
  // 如果有 userDataApi，则通过 URL 获取数据
  if (props.userDataApi) {
    try {
      const response = await fetch(props.userDataApi)
      const data = await response.json()
      return data || []
    } catch (error) {
      console.error('获取用户数据失败:', error)
      // 获取失败时使用默认数据
      return loadDefaultUserData()
    }
  }
}

// 处理左侧标签页切换
const handleLeftTabChange = () => {
  // 清空筛选条件
  deptFilterText.value = ''
  roleFilterText.value = ''
  currentFilterId.value = null
  currentFilterLabel.value = ''
  currentPage.value = 1
  loadAllUsers()
 /*  nextTick(() => {
    debouncedReselectUsers()
  })  */
  // 清空表格中的所有选择
  //userTableRef.value.clearSelection()
  
}
const handleRightTabChange = ()=>{
  if(rightActiveTab.value === 'userList'){
    userFilterText.value = ''
    currentFilterId.value = null
    currentFilterLabel.value = ''
    currentPage.value = 1
    loadAllUsers()
    nextTick(() => {
      debouncedReselectUsers()
    })
  }  
}

// 处理部门节点点击
const handleDeptNodeClick = async (data) => {
  currentFilterId.value = data[rowKey.value]
  currentFilterType.value = 'department'
  currentFilterLabel.value = `部门: ${data.name}`
  currentPage.value = 1
  rightActiveTab.value = 'userList'
  await loadUsersByFilter(data[rowKey.value], 'department', 1)
}

// 处理角色节点点击
const handleRoleNodeClick = async (data) => {
  currentFilterId.value = data[rowKey.value]
  currentFilterType.value = 'role'
  currentFilterLabel.value = `角色: ${data.name}`
  currentPage.value = 1
  rightActiveTab.value = 'userList'
  await loadUsersByFilter(data[rowKey.value], 'role', 1)
}

// 根据筛选条件加载用户
const loadUsersByFilter = async (filterId, filterType, page = 1) => {
  try {
    
    let filteredUsers = []
    
    if (filterType === 'department') {
      // 获取部门及其所有子部门的ID
      const deptIds = getDepartmentAndChildrenIds(filterId)
      filteredUsers = internalUserList.value.filter(user => deptIds.includes(user.departmentId))
    } else if (filterType === 'role') {
      // 获取角色及其所有子角色的ID
      const roleIds = getRoleAndChildrenIds(filterId)
      filteredUsers = internalUserList.value.filter(user => roleIds.includes(user.roleId))
    }

    const selectedUsersArray = Array.from(selectedUsersMap.value.values())
    selectedUsersArray.forEach(selectedUser => {
     // 如果已选中的用户不在当前列表中，则添加进去
      if (!filteredUsers.some(user => user[rowKey.value] === selectedUser[rowKey.value])) {
         filteredUsers.push(selectedUser)
       }
     })
    
    totalUsers.value = filteredUsers.length
    
    // 分页处理
    const start = (page - 1) * pageSize.value
    const end = start + pageSize.value
    allUsers.value = filteredUsers.slice(start, end)
    debouncedReselectUsers()
  } catch (error) {
    console.error('加载用户失败:', error)
  }
}

// 加载所有用户
const loadAllUsers = async () => {
  try {
    // 等待获取用户数据
    internalUserList.value = await loadUserData()    
    
    const selectedUsersArray = Array.from(selectedUsersMap.value.values())
    selectedUsersArray.forEach(selectedUser => {
      if(!internalUserList.value.some(user => user[rowKey.value] === selectedUser[rowKey.value])){
        internalUserList.value.push(selectedUser)
      }
    })
    totalUsers.value = internalUserList.value.length
    
    // 分页处理
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    allUsers.value = internalUserList.value.slice(start, end)
    debouncedReselectUsers()
  } catch (error) {
    console.error('加载用户失败:', error)
  }
}

// 获取部门及其所有子部门的ID
const getDepartmentAndChildrenIds = (deptId) => {
  const ids = [deptId]
  const findChildren = (nodes) => {
    nodes.forEach(node => {
      if (node[rowKey.value] === deptId || ids.includes(node[rowKey.value])) {
        if (node.children && node.children.length > 0) {
          node.children.forEach(child => {
            ids.push(child[rowKey.value])
            if (child.children && child.children.length > 0) {
              findChildren([child])
            }
          })
        }
      } else if (node.children && node.children.length > 0) {
        findChildren(node.children)
      }
    })
  }
  findChildren(internalDepartmentTree.value)
  return ids
}

// 获取角色及其所有子角色的ID
const getRoleAndChildrenIds = (roleId) => {
  const ids = [roleId]
  const findChildren = (nodes) => {
    nodes.forEach(node => {
      if (node[rowKey.value] === roleId || ids.includes(node[rowKey.value])) {
        if (node.children && node.children.length > 0) {
          node.children.forEach(child => {
            ids.push(child[rowKey.value])
            if (child.children && child.children.length > 0) {
              findChildren([child])
            }
          })
        }
      } else if (node.children && node.children.length > 0) {
        findChildren(node.children)
      }
    })
  }
  findChildren(internalRoleTree.value)
  return ids
}

// 重新设置已选中的用户
const debouncedReselectUsers = debounce(() => {
  reselectUsers()
}, 100)
const reselectUsers = () => {
  if (selectedLimit.value === 1) {
    // 单选模式特殊处理
    const selectedUser = Array.from(selectedUsersMap.value.values())[0]
    if (selectedUser) {
      const userInCurrentPage = allUsers.value.find(user => user[rowKey.value] === selectedUser[rowKey.value])
      if (userInCurrentPage) {
        nextTick(() => {
          userTableRef.value?.setCurrentRow(userInCurrentPage)
          currentRowRadio.value = userInCurrentPage[rowKey.value]
        })
      }
    } else {
      nextTick(() => {
        userTableRef.value?.setCurrentRow()
      })
    }
  } else {
    // 多选模式保持原有逻辑
    const selectedIds = Array.from(selectedUsersMap.value.keys())
    allUsers.value.forEach(user => {
      if (selectedIds.includes(user[rowKey.value])) {
        userTableRef.value.toggleRowSelection(user, true)
      }else {
        userTableRef.value.toggleRowSelection(user, false)
      }
    })
  }
}

// 处理分页变化
const handlePageChange = (page) => {
  if (currentFilterId.value && currentFilterType.value) {
    loadUsersByFilter(currentFilterId.value, currentFilterType.value, page)
  } else {
    loadAllUsers()
  }
}

const currentRowRadio = computed({
  get: () => {
    return currentRow.value ? currentRow.value[rowKey.value] : null
  },
  set: (key) => {
    const row = allUsers.value.find(r => r[rowKey.value] === key)
    if (row) {
      currentRow.value = row
    }
  }
})

const showLimitMessage=(limit)=>{
   ElMessage.error(`最多只能选择${limit}个用户`)
}
const handleRowClick = (row) => {
    currentRow.value = row
    if(selectedLimit.value ===1){
      selectedUsersMap.value.clear()
      selectedUsersMap.value.set(row[rowKey.value], row)
      reselectUsers()
      return
    }
    if(selectedLimit.value > 1 && selectedUsersMap.value.size >= selectedLimit.value){
      showLimitMessage(selectedLimit.value)
      return
    }
    selectedUsersMap.value.set(row[rowKey.value], row)

    debouncedReselectUsers()
}
// 处理用户选择变化
const handleSelectionChange = (selection) => {
  if(selection.length === 0) {
    selection = Array.from(selectedUsersMap.value.values());
  }
  //  限制选择数量
  if(selectedLimit.value > 1 && selection.length > selectedLimit.value){
    selection.splice(selectedLimit.value) 
    // showLimitMessage(selectedLimit.value)
  }

  // 先从已选择的用户中移除当前页面中未被选中的用户
  const currentPageUserIds = allUsers.value.map(user => user[rowKey.value])
  const selectedIds = selection.map(user => user[rowKey.value])
  
  currentPageUserIds.forEach(id => {
    if (!selectedIds.includes(id)) {
      selectedUsersMap.value.delete(id)
    }
  })
  
  // 添加新选中的用户
  selection.forEach(user => {
    selectedUsersMap.value.set(user[rowKey.value], user)
  })
  debouncedReselectUsers()
}

// 删除已选择的用户
const removeSelectedUser = (userId) => {
  selectedUsersMap.value.delete(userId)
  // 更新表格中的选择状态
  nextTick(() => {
    const userToRemove = allUsers.value.find(user => user[rowKey.value] === userId)
    if (userToRemove) {
      userTableRef.value.toggleRowSelection(userToRemove, false)
    }
  })
}

// 清空所有已选择的用户
const clearAllSelected = () => {
  selectedUsersMap.value.clear()
  // 清空表格中的所有选择
  userTableRef.value.clearSelection()
}

// 关闭对话框
const handleClean = () => {
  dialogVisible.value = false
  selectedUsersMap.value.clear()
  selectedUserIds.value = []
  currentFilterId.value = null
  currentFilterType.value = 'department'
  currentFilterLabel.value = ''
  currentPage.value = 1
  leftActiveTab.value = 'department'
  rightActiveTab.value = 'userList'
  deptFilterText.value = ''
  roleFilterText.value = ''
  userFilterText.value = ''
}
const handleClose = () => {
  handleClean()
  if (props.onCancel && typeof props.onCancel === 'function') {
    props.onCancel()
  }
  emit('cancel')
}

// 确认选择
const handleConfirm = () => {
  const selectedUsersArray = Array.from(selectedUsersMap.value.values())
  const result = {
    ids: selectedUsersArray.map(user => user[rowKey.value]),
    names: selectedUsersArray.map(user => user.name)
  }
  if (props.onConfirm && typeof props.onConfirm === 'function') {
    try {
      props.onConfirm(result)
    } catch (error) {
      console.error('onConfirm 回调执行出错:', error)
    }
  }
  emit('confirm',result)
  if (currentCallback.value) {
    currentCallback.value(result)
  }
  
  handleClean()
}
const selectedIdsToUsers = (selectedIds = []) => {
  if(selectedLimit.value > 0 && selectedIds.length > selectedLimit.value){
    selectedIds = selectedIds.slice(0, selectedLimit.value)
  }
  // 在对话框打开后设置已选中的用户
  nextTick(async () => {
    // 加载部门和角色数据
    await Promise.all([
      loadDepartmentData(),
      loadRoleData()
    ]) 
    
    // 获取所有用户数据并设置已选中的用户
    internalUserList.value = await loadUserData()  
    selectedUsersMap.value.clear()    
    selectedIds.forEach(id => {
      const user = internalUserList.value.find(u => u[rowKey.value] === id)
      if (user) {
        selectedUsersMap.value.set(user[rowKey.value], user)
      }
    }) 
    // 如果有已选中的用户，切换到已选择用户标签页
    if (selectedIds.length > 0) {      
      rightActiveTab.value = 'selectedUsers'
      reselectUsers()
    }
  })
}
// 公开方法：选择用户
const selectUser = (selectedIds = [], callback, limit = 0) => {
  selectedLimit.value = limit
  selectedUserIds.value = selectedIds
  currentCallback.value = callback
  dialogVisible.value = true
  selectedIdsToUsers(selectedIds)
}

// 模拟获取所有用户数据的方法
const loadDefaultUserData = () => {
  // 在实际应用中，这里应该从API获取完整的用户列表
  return [
    { id: 1, name: '张三', position: '前端工程师', departmentName: '前端组', departmentId: 3, roleId: 101 },
    { id: 2, name: '李四', position: '后端工程师', departmentName: '后端组', departmentId: 4, roleId: 102 },
    { id: 3, name: '王五', position: '产品经理', departmentName: '技术部', departmentId: 2, roleId: 103 },
    { id: 4, name: '赵六', position: '人事专员', departmentName: '人事部', departmentId: 5, roleId: 104 },
    { id: 5, name: '钱七', position: '财务经理', departmentName: '财务部', departmentId: 6, roleId: 105 }   
  ]
}

// 模拟部门数据
const loadDefaultDepartmentData = () => {
  // 模拟部门树数据
  internalDepartmentTree.value = [
    {
      id: 1,
      name: '总公司',
      children: [
        {
          id: 2,
          name: '技术部',
          children: [
            { id: 3, name: '前端组' },
            { id: 4, name: '后端组' }
          ]
        },
        {
          id: 5,
          name: '人事部'
        },
        {
          id: 6,
          name: '财务部'
        },
        {
          id: 7,
          name: '设计部'
        },
        {
          id: 8,
          name: '运维部'
        }
      ]
    }
  ]
}

// 模拟角色数据
const loadDefaultRoleData = () => {
  // 模拟角色树数据
  internalRoleTree.value = [
    {
      id: 100,
      name: '管理角色',
      children: [
        { id: 101, name: '开发角色' },
        { id: 102, name: '测试角色' },
        { id: 103, name: '产品角色' }
      ]
    }
  ]
}

watch(() => props.deptTreeData, (newVal) => {
  if (newVal.length > 0) {
    internalDepartmentTree.value = newVal
  }
}, { immediate: true })

watch(() => props.roleTreeData, (newVal) => {
  if (newVal.length > 0) {
    internalRoleTree.value = newVal
  }
}, { immediate: true })

onMounted(() => {  
  loadRoleData()
  loadDepartmentData()
  
  nextTick(() => {    
    loadAllUsers() 
    if (props.selected) {
      if (Array.isArray(props.selected)) {
        selectedIdsToUsers(props.selected)
        return
      }
      selectedIdsToUsers(props.selected.split(','))
    }
  })  
})

// 暴露方法给父组件
defineExpose({
  selectUser
})
</script>

<style scoped>
.filter-panel {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.search-input {
  margin-bottom: 10px;
}

.tree-container {
  flex: 1;
  overflow-y: auto;
}
.user-list-card{
  --el-card-padding:10px;
}
.user-list-panel {
  height: 400px;
  display: flex;
  flex-direction: column;   
}

.user-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.table-container {
  flex: 1;
}

.pagination-container {
  margin-top: 10px;
  text-align: right;
}

.selected-users-panel {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.selected-users-header {
  margin-bottom: 10px;
  text-align: right;
}

.selected-users-container {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 8px;
}

.selected-user-card {
  width: clac(100%-10px);
  min-height: 66px;
  margin-bottom: 0;
  padding: 6px 10px;
}

.user-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: bold;
  margin-bottom: 1px;
  font-size: 13px;
}

/* 添加新样式 */
.user-details {
  display: flex;
  gap: 10px;
}

.user-position, .user-department {
  font-size: 11px;
  color: #666;
}

.no-selected-users {
  text-align: center;
  color: #999;
  width: 100%;
  padding: 20px;
}

.filter-tag {
  height: 32px;
  line-height: 32px;
  align-self: flex-start;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>